<template>
  <view class="classify">
    <view class="classify-header tn-flex tn-flex-col-center tn-flex-row-center">
      <view class="classify-search-box tn-flex-row">
        <view class="search-box-icon"
          ><tn-icon color="#999" icon="search"></tn-icon
        ></view>
        <view class="search-box-text">请输入商品名称</view>
      </view>
    </view>
    <!-- 分类列表与内容 -->
    <view class="classify-container">
      <view class="classify-container-warp tn-flex tn-flex-row">
        <view class="classify-container-warp-left">
          <!-- 左侧1级分类-->
          <scroll-view
            class="classify-box"
            scroll-y
            scroll-with-animation
            :scroll-top="leftScrollViewTop"
            :style="{ height: scrollViewHeight + 'px' }"
          >
          <view class="scroll-content-box">
            <view
              v-for="(classify, index) in classifyData"
              :key="index"
              :id="`classify-item-${index}`"
              class="classify-item tn-flex-column"
              :class="leftClassifyClass(index)"
              @tap.stop="clickClassifyNav(index)"
            >
             
                <view class="classify-name">{{ classify.classifyName }}</view>
              
            </view>
          </view>
          </scroll-view>
        </view>
        <view class="classify-container-warp-right tn-flex-1">
          <!-- 右侧2、3级分类-->
          <scroll-view
            class="classify-box"
            scroll-y
            scroll-with-animation
            :scroll-top="leftScrollViewTop"
            :style="{ height: scrollViewHeight + 'px' }"
          >
            <!-- <view v-for="i in 100" class="classify-item">
              <view class="classify-name">{{ i }}</view>
            </view> -->
            
            <view
              v-for="(classify, index) in subClassifyData"
              class="classify-item tn-flex-column"
            >
              <view class="classify-name">{{ classify.classifyName }}</view>
              <view class="classify-item-sub tn-flex-wrap">
                <view
                  v-for="subClassify in classify.children"
                  class="classify-item-sub-item tn-col-4 tn-flex-column"
                  @tap.stop="clickClassify(subClassify.id)"
                >
                  <view class="classify-item-sub-item-img"
                    ><img :src="subClassify.classifyImg"
                  /></view>
                  <view class="classify-item-sub-item-name">{{
                    subClassify.classifyName
                  }}</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from "vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import { getClassify } from "@/api/classify";
import { navPage } from "@/tuniao-ui/utils";

interface Classify {
  id: number;
  classifyName: string;
  classifyImg: string;
  children: Classify[];
  classifyPath: string;
  isShow: number;
  pid: number;
  sprt: number;
}

const classifyData = ref<Classify[]>([]);
const subClassifyData = ref<Classify[]>([]); // 子分类

//console.log("分类树", await getClassify());

const scrollViewHeight = ref(0); // scroll-view的高度
const leftScrollViewTop = ref(0); // scroll-view的的滚动高度, 更改这个值可以设定滚动到某个区域

const currentTabbarIndex = ref(0); // 当前选中的tabbar序号

// 动态计算左侧分类class
const leftClassifyClass = computed(() => (index: number) => {
  if (index == currentTabbarIndex.value) {
    return "classify-item-active tn-bg-white tn-color-main"; //
  } else {
    let clazz = "";
    if (
      currentTabbarIndex.value > 0 &&
      index === currentTabbarIndex.value - 1
    ) {
      clazz += " classify-item-active-prev";
    }
    if (
      currentTabbarIndex.value < classifyData.value.length &&
      index === currentTabbarIndex.value + 1
    ) {
      clazz += " classify-item-active-next";
    }
    return clazz;
  }
});

// 左侧分类单击事件
function clickClassifyNav(index: number) {
  if (currentTabbarIndex.value === index) {
    return;
  }
  currentTabbarIndex.value = index;

  subClassifyData.value = classifyData.value[index].children;

  handleLeftScrollView(index);
}

// 右侧分类点击事件
function clickClassify(id: number) {
  navPage("/pages/search/goodsList?classifyId=" + id);
}

// 左侧分类点击后  处理scrollView 滚动到居中位置
function handleLeftScrollView(index: number) {
  // 分类不会太多 ，暂时不做
}

onMounted(() => {
  // 获取当前系统信息
  const systemInfo = uni.getSystemInfoSync();
  const { safeArea, windowWidth, windowHeight } = systemInfo;
  const bottomRpx = (100 / 750) * windowWidth; // 底部tabbar的高度，100rpx换算成px，这个是rpx与px的换算公式
  const topRpx = (120 / 750) * windowWidth; // 分类列表顶部搜索的高度，120rpx换算成px
  const wHeight = safeArea?.height; // 安全区域高度，有的机型底部有横条，这个是增加的高度
  // 没有就用屏幕高度
  if (wHeight) {
    scrollViewHeight.value = wHeight - bottomRpx - topRpx;
  } else {
    scrollViewHeight.value = windowHeight - bottomRpx - topRpx;
  }

  // 获取分类数据
  getClassify().then((res) => {
    classifyData.value = res.result;
    subClassifyData.value = classifyData.value[0].children;
  });
});
</script>

<style lang="scss" scoped>
.classify-header {
  height: 120rpx;
  background-color: #fff;
  padding: 10rpx 20rpx 30rpx 20rpx;
  .classify-search-box {
    height: 100%;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 50rpx;
    justify-content: center;
    align-items: center;
    color: #999;
    .search-box-icon {
      margin-right: 10rpx;
    }
  }
}

.classify-container {
  &-warp {
    /**左侧分类 start */
    &-left {
      background-color: #f5f5f5;
      .classify-box {
        width: 200rpx;
        text-align: center;
        background-color: #f5f5f5;
        .scroll-content-box {
          background-color: #fff;
        }
        .classify-item {
          background-color: #f5f5f5;
          height: 90rpx;
          justify-content: center;
          color: #444;
          &:first-child {
            border-top-right-radius: 0rpx;
          }

          &:last-child {
            border-bottom-right-radius: 0rpx;
          }

          &-active {
            background-color: #ffffff;
            position: relative;
            font-weight: bold;
            color: #ff6700;
            &::before {
              content: "";
              position: absolute;
              width: 15rpx;
              height: 45rpx;
              top: 50%;
              left: 0;
              background-color: #b88230;
              border-radius: 12rpx;
              transform: translateY(-50%) translateX(-50%);
            }

            &-prev {
              border-bottom-right-radius: 26rpx;
            }

            &-next {
              border-top-right-radius: 26rpx;
            }
          }
        }
      }
    }
    /**左侧分类 end */

    /**右侧分类 start */
    &-right {
      background-color: #fff;
      padding-left: 20rpx;
      .classify-name {
        font-size: 28rpx;
        font-weight: bold;
      }
      .classify-item {
        margin-bottom: 30rpx;
        &-sub {
          margin-top: 20rpx;
          margin-bottom: 50rpx;
        }
        &-sub-item {
          text-align: center;
          align-items: center;
          font-size: 24rpx;
          padding-right: 20rpx;
          margin-top: 10rpx;
          &-img {
            width: 100%;
            overflow: hidden;
            height: 130rpx;
            width: 130rpx;
            img {
              width: 100%;
              max-width: 120rpx;
              border-radius: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
